<script setup>
import {computed, onMounted, ref} from 'vue'
import request from "@/utils/request";
import {ElMessage} from "element-plus";
const flag = ref(false)
const auditing = ref(3)
//用户信息
const userInfo = ref({
  avatar :'',
  birthday:'',
  email:'',
  gender:'',
  id:undefined,
  nickname:'',
  phoneNum:'',
  roleIds:'',
  status:''
})
const loadUserinfo =()=> {
  request.get(`/users/myinfo`).then(res => {
    Object.assign(userInfo.value,res.data)
  })
}
//用户证件信息
const authenticationInfo = ref({
  name :'',
  authenticationType:'',
  authenticationNumber:'',
  nationality:'',
  birthday:'',
  validDateStart:'',
  validDateEnd:''

})
//是否完成写证件验证信息
const authenticationFlag = ref(true)
const loadUserAuthenticationInfo = ()=> {
  request.get(`/users/authentication`).then(res => {
    console.log(res.data)
    //没有找到认证信息
    if(res.data === null){
      authenticationFlag.value=false
    }else{
      auditing.value = res.data.auditing
    }
    Object.assign(authenticationInfo.value,res.data)

  })
}

//新增证件认证信息
const addAuthenticationInfo = ref({
  name: '',
  authenticationType: '',
  authenticationNumber: '',
  nationality: '',
  birthday:'',
  validDateStart: '',
  validDateEnd: ''
})
//认证弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')

const handleClose = ()=>{
  if(confirm("确定退出认证？")){
    resetData()
    dialogVisible.value=false

  }
}

const resetData = ()=>{
  addAuthenticationInfo.value.name = ''
  addAuthenticationInfo.value.authenticationType = ''
  addAuthenticationInfo.value.authenticationNumber = ''
  addAuthenticationInfo.value.nationality = ''
  addAuthenticationInfo.value.birthday = ''
  addAuthenticationInfo.value.validDateStart = ''
  addAuthenticationInfo.value.validDateEnd = ''
}
const handleSave = () =>{
  if(confirm("确定提交认证信息？已有的认证信息将会被覆盖。")){
    addAuthenticationInfo.value.validDateStart = formatDate(addAuthenticationInfo.value.validDateStart).toString()
    addAuthenticationInfo.value.validDateEnd = formatDate(addAuthenticationInfo.value.validDateEnd).toString()
    addAuthenticationInfo.value.birthday = formatDate(addAuthenticationInfo.value.birthday).toString()

    // console.log(addAuthenticationInfo.value)
    request.post(`/users/authentication`,addAuthenticationInfo.value).then(res => {
      ElMessage.success("提交成功")
      resetData()
      dialogVisible.value=false
      location.reload()

    })
  }

}



const handleEditAuthentication = ()=>{
  dialogVisible.value=true;
  dialogTitle.value ='修改认证'
}
//read only dialog
const readOnlyDialogVisible = ref(false)

const handleShowDetail = () =>{
  readOnlyDialogVisible.value=true;

  addAuthenticationInfo.value.name = authenticationInfo.value.name
  addAuthenticationInfo.value.authenticationType = authenticationInfo.value.authenticationType.toString()
  addAuthenticationInfo.value.authenticationNumber = authenticationInfo.value.authenticationNumber
  addAuthenticationInfo.value.nationality = authenticationInfo.value.nationality.toString()
  addAuthenticationInfo.value.birthday = authenticationInfo.value.birthday
  addAuthenticationInfo.value.validDateStart = authenticationInfo.value.validDateStart
  addAuthenticationInfo.value.validDateEnd = authenticationInfo.value.validDateEnd
  console.log(authenticationInfo.value)
}

const handleReadOnlyClose = ()=>{
  readOnlyDialogVisible.value = false;
  resetData()
}

//日期格式formater
const formatDate= (date)=> {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;

  return [year, month, day].join('-');
}

//字典数值
const authenticationOptions = ref()
const nationalityOptions = ref()
const auditingOptions = ref([
    {
      value: 0,
      label: '认证成功'
    },
    {
      value: 1,
      label: '审核中'
    },
    {
      value: 2,
      label: '认证失败'
    },
    {
      value: 3,
      label: '未认证'
    }

])

//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{
  loadDictOptionsByCode(authenticationOptions,'identification_type')
  loadDictOptionsByCode(nationalityOptions,'bus_user_nationality')

}
//formatter-----------------------------------------------------------------
const authenticationFormatter = (val)=>{
  for(let index in authenticationOptions.value){
    if(authenticationOptions.value[index].value==val){
      val = authenticationOptions.value[index].label
      return val
    }
  }
  return val
}
const nationalityFormatter = (val)=>{

  for(let index in nationalityOptions.value){
    if(nationalityOptions.value[index].value==val){
      val = nationalityOptions.value[index].label
      return val
    }
  }
  return val
}
const auditingFormatter = (val)=>{

  for(let index in auditingOptions.value){
    if(auditingOptions.value[index].value==val){
      val = auditingOptions.value[index].label
      return val
    }
  }
  return val
}

onMounted(()=>{
  loadUserinfo()
  loadUserAuthenticationInfo()
  loadAllDictOptions()


})
</script>

<template>

  <div style="width: 100%;border: 1px solid rgb(220, 223, 230)">
    <div style="padding: 20px 20px; position: relative" >
      <h2>证件认证</h2>
      <el-row :gutter="10">
        <el-col :span="5">
        </el-col>
        <el-form  label-width="150px" style="width: 50%">
          <el-col :span="24">
            <el-form-item label="姓名:" >
              <el-input readonly v-model="authenticationInfo.name" style="width: 100%;" placeholder="未认证"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证件类型:" >
              <el-input readonly v-model="authenticationInfo.authenticationType" style="width: 100%; " placeholder="未认证"/>
            </el-form-item>
            <span style="position: absolute; right:205px; top: 55px; font-size: 12px; cursor: default" > {{auditingFormatter(auditing)}} </span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证件号码:" >
              <el-input readonly v-model="authenticationInfo.authenticationNumber" style="width: 100%;" placeholder="未认证"/>
            </el-form-item>
            <span style="position: absolute; right:205px; top: 107px; font-size: 12px; cursor: default" > {{auditingFormatter(auditing)}} </span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生日:" >
              <el-input v-if="authenticationFlag" readonly v-model="authenticationInfo.birthday" style="width: 100%;" :formatter="formatDate" />
              <el-input v-else readonly style="width: 100%;" />

            </el-form-item>
          </el-col>
          <el-row v-if="authenticationFlag===true" gutter="10">
            <el-col :span="6"></el-col>
            <el-col :span="9">
              <el-button v-show="auditing!==1" type="info" style="width: 100%" @click="handleEditAuthentication">修改</el-button>
            </el-col>
            <el-col :span="9">
              <el-button type="primary"  style="width: 100%" @click="handleShowDetail">查看详情</el-button>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="5"></el-col>
            <el-col :span="9">

            </el-col>
            <el-col :span="9">
              <el-button type="primary" style="width: 100%" @click="dialogVisible=true; dialogTitle='证件认证'">开始验证</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <!--弹窗-->
      <el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%" :before-close="handleClose">

        <el-form  label-width="120px" style="width: 100%">
          <el-col :span="24">
            <el-form-item label="姓名:" style="width: 100%">
              <el-input v-model="addAuthenticationInfo.name" style="width: 100%;" placeholder="请填写姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证件类型:">
              <el-select v-model="addAuthenticationInfo.authenticationType" style="width: 100%;">
                <el-option v-for="(item,index) in authenticationOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证件号码:">
              <el-input  v-model="addAuthenticationInfo.authenticationNumber" style="width: 100%;" placeholder="请输入证件号码"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国籍:" >
              <el-select v-model="addAuthenticationInfo.nationality" style="width: 100%;" placeholder="请选择国籍">
                <el-option v-for="(item,index) in nationalityOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="出生日期:" >
              <el-date-picker
                  v-model="addAuthenticationInfo.birthday"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间开始:" >

              <el-date-picker
                  v-model="addAuthenticationInfo.validDateStart"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间结束:" >
              <el-date-picker
                  v-model="addAuthenticationInfo.validDateEnd"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-row :gutter="10" >
            <el-col :span="8"></el-col>
            <el-col :span="8">
              <el-button type="info" style="width: 100%;" @click="handleClose" >取消</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" style="width: 100%;" @click=" handleSave" >确认</el-button>
            </el-col>
          </el-row>


        </el-form>
      </el-dialog>
      <!-- read only弹窗     -->
      <el-dialog title="认证详情" v-model="readOnlyDialogVisible" width="30%" :before-close="handleReadOnlyClose">

        <el-form  label-width="120px" style="width: 100%">
          <el-col :span="24">
            <el-form-item label="姓名:" style="width: 100%">
              <el-input v-model="addAuthenticationInfo.name" style="width: 100%;" placeholder="请填写姓名" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证件类型:">
              <el-select v-model="addAuthenticationInfo.authenticationType" style="width: 100%;" disabled>
                <el-option v-for="(item,index) in authenticationOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证件号码:">
              <el-input  v-model="addAuthenticationInfo.authenticationNumber" style="width: 100%;" placeholder="请输入证件号码" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国籍:" >
              <el-select v-model="addAuthenticationInfo.nationality" style="width: 100%;" placeholder="请选择国籍" disabled >
                <el-option v-for="(item,index) in nationalityOptions" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="出生日期:" >
              <el-date-picker
                  v-model="addAuthenticationInfo.birthday"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
                  readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间开始:" >

              <el-date-picker
                  v-model="addAuthenticationInfo.validDateStart"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
                  readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间结束:" >
              <el-date-picker
                  v-model="addAuthenticationInfo.validDateEnd"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  style="width: 100%"
                  readonly
              />
            </el-form-item>
          </el-col>
          <el-row :gutter="10">
            <el-col :span="8"></el-col>
            <el-col :span="8">

            </el-col>
            <el-col :span="8">
              <el-button type="primary" style="width: 100%;" @click=" handleReadOnlyClose" >确认</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>


    </div>
  </div>


</template>

<style scoped>

</style>